<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Markley Mockup</title>
    <meta name="description" content="">
    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" href="css/main.css">

    <!-- All JavaScript at the bottom, except this Modernizr build.
         Modernizr enables HTML5 elements & feature detects for optimal performance.
         Create your own custom Modernizr build: www.modernizr.com/download/ -->
    <script src="js/vendor/modernizr-2.5.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
    <!--[if lt IE 7]><p class="chromeframe">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

  <div class="box full">
<!-- twitter style "drawer" for displaying validation errors -->

<!-- the form -->
<form action="#" id="MyForm">

  <div id="wizard">
	
    <ul id="status">
    	<li class="active">Customize</li>
      <li> Create Account</li>
      <li> Contact Information</li>
      <li> Payment Information</li>
    </ul>
    <div id="drawer">
    Please fill in the empty fields marked with
    a <samp style="color:red">red</samp> border.
    </div> <!-- drawer -->

    <div class="items">

      <!-- page1 -->
      <div class="page">
      	<div class="cust"></div>
      	  <div class="require">
          <em>Datacenter</em>
          <select id="datacenter">
            <option value="">Please choose</option>
            <option value="1">Datacenter 1</option>
            <option value="2">Datacenter 2</option>
          </select>&nbsp;&nbsp;&nbsp;<img id="dc" src="img/qmark.gif" title="Click here for info!"></img>
          <br /><a href="i1.html" rel='ibox&title_text="Datacenter"'><img src="img/qmark.gif"></img></a><br>
          <em>Processor</em>
          <select id="processor" title="bleh bleh">
          	<option value="">Please choose</option>
            <option value="1">Singlecore</option>
            <option value="2">Dualcore</option>
          </select>&nbsp;&nbsp;&nbsp;<img id="pr" src="img/qmark.gif" title="Click here for info!"></img><br />
          <em>Memory</em>
          <select id="memory" title="bloh bloh">
          	<option value="">Please choose</option>
          	<option value="1">1GB</option>
            <option value="2">2GB</option>
           </select>&nbsp;&nbsp;&nbsp;<img id="me" src="img/qmark.gif" title="Click here for info!"></img><br />
           <em>Disk space</em>
           <select id="disk" title="bluh bluh">
           <option value="">Please choose</option>
           <option value="1">10GB</option>
           <option value="2">100GB</option>
           </select>&nbsp;&nbsp;&nbsp;<img id="di" src="img/qmark.gif" title="Click here for info!"></img><br />
           <em>Bandwitdh</em>
           <select id="bandwitdh" title="blih blih">
           <option value="">Please choose</option>
           <option value="1">10MBs</option>
           <option value="2">100MBs</option>
           </select>&nbsp;&nbsp;&nbsp;<img id="ba" src="img/qmark.gif" title="Click here for info!"></img></div><!-- div required --><br /><br />
      	<!-- Add button to proceed to next step -->
      	  <li class="clearfix">
	    	<button type="button" class="next right">Proceed &raquo;</button>
	  	  </li>
	  	  <div id="StoreCalc">
  			Monthly fee: $<span id="StoreOrderSummaryMonthly">$</span><br>
   	 	 	Setup fee: $<span id="StoreOrderSummarySetup">$</span>
		</div> <!-- storecalc -->
      </div> <!-- page -->

	<div class="page"><div class="cust"></div>
    	<label id="cust" title="cust"></label>
          <em>Management</em>
          <select id="datacenter">
            <option value="0">None</option>
            <option value="1">Remote hands</option>
            <option value="2">Technical support</option>
          </select><br />
          <em>Processor</em>
          <select id="processor">
            <option value="1">Singlecore</option>
            <option value="2">Dualcore</option>
          </select><br />
          <em>Memory</em>
          <select id="memory">
            <option value="1">1GB</option>
            <option value="2">2GB</option>
          </select><br />
          <em>Disk space</em>
          <select id="disk">
            <option value="1">10GB</option>
            <option value="2">100GB</option>  
          </select><br />
          <em>Bandwitdh</em>
          <select id="bandwitdh">
            <option value="1">10MBs</option>
            <option value="2">100MBs</option>
          </select><br /><br />
        <!-- Add button to proceed to next step -->
          <li class="clearfix">
            <button type="button" class="prev" style="float:left">
              &laquo; Back
            </button>
            <button type="button" class="next right">Proceed &raquo;</button>
          </li>
      </div> <!-- page -->
      <div class="page">
      <div class="acct">
      <H1 style="text-align:center">Are you a current subscriber?</H1>
 		<table style="margin-left:30%;margin-right:50%;">
 			<tr>
 			<th style="padding:50px; font-size:20px;"><button id="but_yes" type="button">Yes</button></th>
 			<th><button class="next right" type="button">No</button></th>
			</tr>
 		</table>
 		
        <li class="clearfix">
            <button type="button" class="prev" style="float:left">&laquo; Back        </button>
            <button type="button" class="next right">Proceed &raquo;</button>
          </li>
      </div>
	</div>
      <!-- page -->
      <div class="page"><div class="acct"></div>

	<h2>
	  <strong>Step 1: </strong> jQuery Tools Account
	  <em>Please enter your login information:</em>
	</h2>

	<ul>
	  <!-- email -->
	  <li class="required">
	    <label>
	      <strong>1.</strong> Enter Your Email Address <span>*</span><br />
	      <input type="text" class="text" name="email" />
	      <em>Your password will be sent to this address. Your
	        address will not made public.</em>
	    </label>
	  </li>

	  <!-- username -->
	  <li class="required">
	    <label>
	      <strong>2.</strong> Pick a username <br />
	      <input type="text" class="text" name="username" minlength="4" />
	      <em>Your preferred username to be used when logging in.</em>
	    </label>
	  </li>

	  <!-- password -->
	  <li class="required double">

	    <label>
	      <strong>3.</strong> Choose a Password <span>*</span><br />
	      <input type="password" class="text" name="password" />
	      <em>Must be at least 8 characters long.</em>
	    </label>

	    <label>
	      Verify Password <span>*</span><br />
	      <input type="password" class="text" name="password1" />
	    </label>
	  </li>

	  <li class="clearfix">
      	    <button type="button" class="prev" style="float:left">
              &laquo; Back
            </button>
	    <button type="button" class="next right">Proceed &raquo;</button>
	  </li>
	</ul>

      </div> <!-- page -->

      <!-- page -->
      <div class="page"><div class="acct"></div>

	<h2>
	  <strong>Step 1: </strong> jQuery Tools Account
	  <em>Please enter your login information:</em>
	</h2>

	<ul>
	  <!-- email -->
	  <li class="required">
	    <label>
	      <strong>1.</strong> Enter Your Email Address <span>*</span><br />
	      <input type="text" class="text" name="email" />
	      <em>Your password will be sent to this address. Your
	        address will not made public.</em>
	    </label>
	  </li>

	  <!-- username -->
	  <li>
	    <label>
	      <strong>2.</strong> Pick a username <br />
	      <input type="text" class="text" name="username" />
	      <em>Your preferred username to be used when logging in.</em>
	    </label>
	  </li>

	  <!-- password -->
	  <li class="required double">

	    <label>
	      <strong>3.</strong> Choose a Password <span>*</span><br />
	      <input type="password" class="text" name="password" />
	      <em>Must be at least 8 characters long.</em>
	    </label>

	    <label>
	      Verify Password <span>*</span><br />
	      <input type="password" class="text" name="password1" />
	    </label>
	  </li>

	  <li class="clearfix">
      	    <button type="button" class="prev" style="float:left">
              &laquo; Back
            </button>
	    <button type="button" class="next right">Proceed &raquo;</button>
	  </li>
	</ul>

      </div><!-- page1 -->

      <!-- page2 -->
      <div class="page"><div class="cont"></div>

	<h2>
	  <strong>Step 2: </strong> Contact Information <b></b>
	  <em>Please tell us where you live:</em>
	</h2>

	<ul>
	  <!-- address -->
	  <li class="required">
	    <label>
	      <strong>1.</strong>
              Enter Your Street Address <span>*</span><br />
	      <input type="text" class="text" name="email" />
	      <em><strong>Example</strong>: Random Street 69 A 666</em>
	    </label>
	  </li>

	  <!-- zip / city -->
	  <li class="required double">

	    <label>
	      <strong>2.</strong> Enter Your Zip Code <span>*</span><br />
	      <input class="text" name="zip" />
	      <em>This must be a numeric value</em>
	    </label>

	    <label>
	      <strong>3.</strong> and The City <span>*</span>
	      <select name="city">
		<option value="">-- please select --</option>
		<option>Helsinki</option>
		<option>Berlin</option>
		<option>New York</option>
	      </select>
	    </label>
	  </li>

	  <li class="clearfix">
	    <button type="button" class="prev" style="float:left">
              &laquo; Back
            </button>
	    <button type="button" class="next right">
              Proceed &raquo;
            </button>
	  </li>

	  <br clear="all" />
	</ul>

      </div> <!-- page2 -->

      <!-- page3 -->
      <div class="page"><div class="bill"></div>

	<h2>
	  <strong>Step 3: </strong> Congratulations! <b></b>
	  <em>You are now a happy member of the Open Source community</em>
	</h2>


	<p style="margin-top:30px">
	  <button type="button" class="prev">&laquo; Back</button>
	</p>

      </div> <!-- page3 -->

    </div><!-- items -->

  </div><!--wizard-->
  </div>
</form>
 </div> 


    <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->
    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

    <!-- scripts concatenated and minified via build script -->
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <script type="text/javascript" src="js/myscript.js"></script>
	<script type="text/javascript" src="js/modal.popup.js"></script>
	<script type="text/javascript" src="js/ibox.js"></script>
    <!-- end scripts -->
</body>
</html>
